<template>
    <div class="data-content">
        <div v-if="corpType == '施工'">
            <div v-for="(item, index) in jtzizhi" :key="index">
                <table class="layui-table" v-if="'主项资质' == item.isMain">
                    <colgroup>
                        <col width="200">
                        <col width="200">
                        <col width="200">
                        <col width="200">
                    </colgroup>
                    <thead>
                    <tr>
                        <th colspan="11">主项资质</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>资质名称</th>
                            <td>{{ item.caname }}</td>
                            <th>资质承包类型</th>
                            <td>{{ item.catype }}</td>
                        </tr>
                        <tr>
                            <th>资质等级</th>
                            <td>{{ item.grade }}</td>
                            <th>证书编号</th>
                            <td>{{ item.caCode }}</td>
                        </tr>
                        <tr>
                            <th>发证机关</th>
                            <td>{{ item.issueDepartment }}</td>
                            <th>发证日期</th>
                            <td>{{ item.issueDate }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div style="padding-top: 20px;"></div>
            <table class="layui-table">
                <colgroup>
                    <col width="60">
                    <col width="200">
                    <col width="120">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                </colgroup>
                <thead>
                    <tr>
                        <th colspan="11">增项资质</th>
                    </tr>
                    <tr>
                        <th>序号</th>
                        <th>资质证书编号</th>
                        <th>资质名称</th>
                        <th>资质类型</th>
                        <th>资质等级</th>
                        <th>发证机关</th>
                        <th>发证日期</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in jtzizhi" :key="index" v-show="'施工增项资质' == item.isMain">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.caCode }}</td>
                        <td>{{ item.caname }}</td>
                        <td>{{ item.catype }}</td>
                        <td>{{ item.grade }}</td>
                        <td>{{ item.issueDepartment }}</td>
                        <td>{{ item.issueDate }}</td>
                    </tr>
                </tbody>
            </table>
            <div style="padding-top: 20px;"></div>
            <table class="layui-table">
                <colgroup>
                    <col width="60">
                    <col width="200">
                    <col width="120">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                </colgroup>
                <thead>
                    <tr>
                        <th colspan="11">其他资质</th>
                    </tr>
                    <tr>
                        <th>序号</th>
                        <th>资质证书编号</th>
                        <th>资质名称</th>
                        <th>资质类型</th>
                        <th>资质等级</th>
                        <th>发证机关</th>
                        <th>发证日期</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in jtzizhi" :key="index" v-show="'施工其他资质' == item.isMain">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.caCode }}</td>
                        <td>{{ item.caname }}</td>
                        <td>{{ item.catype }}</td>
                        <td>{{ item.grade }}</td>
                        <td>{{ item.issueDepartment }}</td>
                        <td>{{ item.issueDate }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div v-if="corpType == '监理'">
            <table class="layui-table">
                <colgroup>
                    <col width="60">
                    <col width="200">
                    <col width="120">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                </colgroup>
                <thead>
                    <tr>
                        <th colspan="11">资质信息</th>
                    </tr>
                    <tr>
                        <th>序号</th>
                        <th>资质证书编号</th>
                        <th>批准文号</th>
                        <th>资质类型</th>
                        <th>资质等级</th>
                        <th>发证机关</th>
                        <th>发证日期</th>
                        <th>证书有效期至</th>
                        <th>证书状态</th>
                        <th>定检结论</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in jtzizhi" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.caCode }}</td>
                        <td>{{ item.approvalNumber }}</td>
                        <td>{{ item.catype }}</td>
                        <td>{{ item.grade }}</td>
                        <td>{{ item.issueDepartment }}</td>
                        <td>{{ item.issueDate }}</td>
                        <td>{{ item.validEndDate }}</td>
                        <td>{{ item.status }}</td>
                        <td>{{ item.scheduledCheckstatus }}</td>
                        <td>{{ item.remark }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div v-if="corpType == '勘察设计'">
            <div v-for="(item, index) in jtzizhi" :key="index">
                <table class="layui-table" v-if="'主项资质' == item.isMain">
                    <colgroup>
                        <col width="200">
                        <col width="200">
                        <col width="200">
                        <col width="200">
                    </colgroup>
                    <thead>
                        <tr>
                            <th colspan="11">主项资质</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>资质类型</th>
                            <td>{{ item.scatype }}</td>
                            <th>专项名称</th>
                            <td>{{ item.szxiang }}</td>
                        </tr>
                        <tr>
                            <th>行业名称</th>
                            <td>{{ item.shangye }}</td>
                            <th>专业名称</th>
                            <td>{{ item.szye }}</td>
                        </tr>
                        <tr>
                            <th>资质等级</th>
                            <td>{{ item.sgrade }}</td>
                            <th>证书编号</th>
                            <td>{{ item.scacode }}</td>
                        </tr>
                        <tr>
                            <th>发证机关</th>
                            <td>{{ item.sissuedepartment }}</td>
                            <th>发证日期</th>
                            <td>{{ item.sissuedate }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div style="padding-top: 20px;"></div>
            <table class="layui-table">
                <colgroup>
                    <col width="60">
                    <col width="150">
                    <col width="120">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                </colgroup>
                <thead>
                <tr>
                    <th colspan="11">增项资质</th>
                </tr>
                <tr>
                    <th>序号</th>
                    <th>资质类型</th>
                    <th>专项名称</th>
                    <th>行业名称</th>
                    <th>专业名称	</th>
                    <th>资质等级</th>
                    <th>证书编号</th>
                    <th>发证机关	</th>
                    <th>发证日期	</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in jtzizhi" :key="index" v-show="'设计增项资质' == item.isMain">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.scatype }}</td>
                    <td>{{ item.szxiang }}</td>
                    <td>{{ item.shangye }}</td>
                    <td>{{ item.szye }}</td>
                    <td>{{ item.sgrade }}</td>
                    <td>{{ item.scacode }}</td>
                    <td>{{ item.sissuedepartment }}</td>
                    <td>{{ item.sissuedate }}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <el-link v-if="jtzizhi.length > 0" type="info" :underline="false">*此数据来全国公路建设市场信用信息管理系统官方网站</el-link>
    </div>
</template>

<script>
export default {
    props: {
        jiaotongComId: {
            type: String,
            default: "",
        },
        corpType: {
            type: String,
            default: "",
        },
        navName: {
            type: String,
            default: "",
        },
    },
    data: () => ({
        jtzizhi: { rows: [] },
    }),
    watch:{
        jiaotongComId:{
            handler(n,o){
                this.getJTzizhi();
            },
            deep:true,
        }
    },
    methods: {
        //获取交通，资质信息
        getJTzizhi() {
            var that = this;
            if(!that.jiaotongComId){return}''

            if (!~['施工', '监理', '勘察设计'].indexOf(this.corpType)) {
                return;
            }

            this.$ajax({
                type: "get",
                url: `${that.$store.state.api.searchUrl}/searchjiaotong/jiaotong/zizhi`,
                data: {
                    comId: that.jiaotongComId,
                },
                callback: function (data, res) {
                    if(data.rows){
                        that.jtzizhi = data.rows;
                        that.$emit('pushValidNames',this.navName)
                    }
                    
                },
            });
        },
        sethead(id, name) {
            this.headid = id;
        },
    },
    mounted() {
        this.getJTzizhi();
    },
};
</script>

<style scoped lang="scss">
.data-content {
    .datas_tab {
        display: flex;
        float: none;
        margin-left: 8px;
        margin-bottom: 4px;
        .li {
            display: block;
            float: left;
            margin-left: 8px;
            font-size: 14px;
            height: 29px;
            line-height: 29px;
            padding: 0px 2px;
            cursor: pointer;
            .val{
                font-style: italic;
                color: #348bda;
            }
        }
        .active{
            color: #fff;
            background: #348bda;
            text-decoration: none;
        }
    }
    // border-bottom: 1px solid #efefef;
    padding: 20px 15px;
    .layui-table {
        width: 100%;
        border-collapse: collapse;
    }
    .layui-table td,
    .layui-table th {
        padding: 12px 10px;
        text-align: center;
        border: 1px solid #ddd;
        font-size: 15px;
    }
    .layui-table tr th {
        background: #f9f9f9;
        color: #333;
        position: inherit;
    }
}
</style>
